<template>
  <!--时间线-->
  <div class="timeLine" style="overflow: hidden;position: fixed;
  z-index: 999999;">
    <div class="content">
    </div>
    <div class="ul_box">
      <ul class="my_timeline" ref="mytimeline" style="margin-left: 0;">
        <li class="my_timeline_item" v-for="(item,index) in timeLineList" :key="index" :style="{width:lineWidth+'rem',}">
          <!--圈圈节点-->
          <div class="my_timeline_node" :style = " {backgroundColor: '#e4e7ed', width: '0.2rem', height: '0.2rem'}" @mouseenter="onMouseOver(item)" @mouseleave="onMouseOut" :class="{active: index == timeIndex}"></div>
          <!--线-->
          <div class="my_timeline_item_line"></div>
          <!--标注-->
          <div class="my_timeline_item_content" :style="{color: '#e4e7ed', fontSize: '0.19rem'}">
            {{item.name}}
          </div>
        </li>
        <div v-show="seen" id="r1cont" style="position: fixed;z-index: 9999999;">
          <p>{{showdata}}</p>
          <p>{{showplan}}</p>
          <p>{{showact}}</p>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'timeLine',
  data() {
    return {
      // 用于提示内容显示
      seen:false,
      timeIndex: null,
      // timeLineList: [{
      //   timestamp: '2021-02-02',
      //   info: '准入测试',
      // }, {
      //   timestamp: '2021-03-09',
      //   info: '首轮测试',
      // }, {
      //   timestamp: '2021-04-08',
      //   info: '次轮测试',
      // }]
      // 单段线长
      lineWidth:1.8,
      // 显示数据
      timeLineList:[],
      // 鼠标放置提示数据
      showdata:null,
      showplan:null,
      showact:null,
    }
  },
  mounted() {
    this.gettimedata()
  },
  methods: {
    // 获取项目时间数据
    gettimedata(){
      this.$http({ method: 'get',
        url: 'show/schedule/?system='+this.$route.query.project,}).then(response => {
        // console.log(response.data.rows);
        this.timeIndex=0
        this.lineWidth=5.4/response.data.rows.length
        for(var item in response.data.rows){
          this.timeLineList.push(response.data.rows[item])
          // console.log(item)
          if(response.data.rows[item].actStartTime){
            this.timeIndex=item
            if(response.data.rows[item].actEndTime) {
              this.timeIndex=Number(item)+1
            }
          }
        }
      })
    },
    // 鼠标放置操作
    onMouseOver(item) {
      var showdata =item.name
      if (item.planStartTime) var planStartTime = this.timestampToTime(item.planStartTime)
      else{
        planStartTime = "/"
      }
      if (item.planEndTime) var planEndTime = this.timestampToTime(item.planEndTime)
      else{
        planEndTime = "/"
      }
      // var planEndTime = this.timestampToTime(item.planEndTime)
      if (item.actStartTime)
        // console.log()
        var actStartTime = this.timestampToTime(item.actStartTime)
      else{
        actStartTime = "/"
      }
      // var actStartTime = this.timestampToTime(item.actStartTime)
      if (item.actEndTime) var actEndTime = this.timestampToTime(item.actEndTime)
      else{
        actEndTime = "/"
      }
      // var actEndTime = this.timestampToTime(item.actEndTime)
      this.showplan="计划时间: "+planStartTime+" - "+planEndTime
      this.showact="实际时间: "+actStartTime+" - "+actEndTime
      // showdata+=item.name
      this.showdata = showdata
      this.seen=true
    },
    // 鼠标离开操作
    onMouseOut() {
      this.seen=false
    },
    // 时间戳转换为时间 2021/04/30
    timestampToTime(timestamp) {
      var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '/';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
      var D = date.getDate() + ' ';
      // var h = date.getHours() + ':';
      // var m = date.getMinutes() + ':';
      // var s = date.getSeconds();
      return Y + M + D;
    },
  }
}
</script>

<style lang="scss" scoped>

.ul_box {
  width: 5.5rem;
  height: 0.5rem;
  display: inline-block;
  float: left;
  /*margin-top: 2px;*/
  overflow: hidden;
}
.my_timeline_item {
  display: inline-block;
  //width: 1.8rem;
}
.my_timeline_node {
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  z-index: 999999;
  margin-left: 0.5rem;
}
.my_timeline_node.active {
  background-color: #fff !important;
  /*margin: 0.1rem 0 0 0;*/
  border: 5pt solid #339933;
  /*float: inside;*/
}
.my_timeline_item_line {
  width: 100%;
  height: 0.125rem;
  margin: 0.08rem 0 0 0;
  border-top: 2pt solid #E4E7ED;
  border-left: none;
}
.my_timeline_item_content {
  /*margin: 0 0 0 -10px;*/
  margin-left: 0.25rem;
  margin-top: 0.05rem;
}
#r1cont {
  width: 3.5rem;
  height: .8rem;
  margin-top: 0.2rem;
  margin-left: 1rem;
  color: #CCFFFF;
  font-size: 0.2rem;
  background: rgba(64, 64, 64, .5);
  p{line-height:0.25rem;}
}
</style>